<template>
	<div class="wallet_page layer">
		<van-nav-bar :title="activeCurr?.name + $t('wallet')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="card_box">
			<div class="card_title">
				{{activeCurr?.name}} {{$t('home.totalAssets')}}
			</div>
			<div class="usdt_balance">
				≈{{activeCurr.convert}}
			</div>
			<div class="usa_balance">
				≈{{$utils.getUnit()}}{{activeCurr.convert}}
			</div>
		</div>
		<div class="list_title">
			{{$t('home.transactionDetails')}}
		</div>
		<div class="table_box">
			<van-list v-model="loading" :finished="tableNone" @load="onLoad">
				<table width="100%" align="center" class="my_table">
					<tr class="tr_th">
						<th align="left" class="col1">{{$t('home.type')}}</th>
						<th align="left" class="col2">{{$t('home.numberTitle')}}</th>
						<th align="left" class="col3">{{$t('home.state')}}</th>
						<th align="right" class="col4">{{$t('home.time')}}</th>
					</tr>
					<tr v-for="(item,index) in list" :key="index">
						<td align="left" class="col1">{{item.type == 1 ? $t('recharge') : $t('transfer')}}</td>
						<td align="left" class="col2">{{item.money}}</td>
						<td align="left" class="col3" :style="item.status == 2 ? 'color: #FF4349' : ''">{{status[item.status]}}</td>
						<td align="right" class="col4">{{$day.unix(item.createtime).format('MM-DD HH:mm')}}</td>
					</tr>
				</table>
				<div class="no_data" style="padding-top: 20px;" v-if="list && list.length <= 0 && tableNone">
					<img src="@/assets/images/home/noData.png" class="img" />
					<p>{{$t('home.noData')}}</p>
				</div>
			</van-list>
		</div>
		<div class="submit_box">
			<el-button class="submit_but" @click="$router.push('/recharge?id=' + currency_id)">
				<van-icon name="upgrade" class="icon icon2" />{{$t('recharge')}}
			</el-button>
			<el-button class="submit_but" @click="$router.push('/transfer?id=' + currency_id)">
				<van-icon name="upgrade" class="icon" />{{$t('transfer')}}
			</el-button>
		</div>
	</div>
</template>

<script>
	import {
		indexRechargeList
	} from '@/api/home'
	export default {
		components: {},
		data() {
			return {
				page: 0,
				pagesize: 10,
				currency_id: 1, // 选中得币种id
				loading: false,
				tableNone: false,
				activeCurr: {},
				status: [this.$t('confirming'), this.$t('success'), this.$t('fail')],
				list: [],
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			currencyList() {
				return this.$store.state.currencyList
			}
		},
		watch: {
			currencyList: {
				handler(val) {
					if (val && val.length > 0) {
						this.activeCurr = val.find(i => i.id == this.currency_id)
					}
				},
				deep: true,
				// immediate: true
			}
		},
		mounted() {
			this.currency_id = this.$route.query.id
			if (this.currencyList && this.currencyList.length > 0) {
				this.activeCurr = this.currencyList.find(i => i.id == this.currency_id)
				// console.log('this.activeCurr', this.activeCurr);
			}
			// this.getList()
		},
		methods: {
			onLoad() {
				// console.log('this.tableNone', this.tableNone);
				if (this.tableNone) return
				this.page++
				this.getList()
			},
			async getList() {
				if (this.tableNone) return
				this.loading = true;
				const res = await indexRechargeList({
					page: this.page,
					pagesize: this.pagesize,
					currency_id: this.currency_id,
				}).catch(err => this.loading = false)
				if (res && res.code == 1) {
					this.list = this.list.concat(res.data.data)
					// console.log('res', this.list);
					if (this.page >= res.data.last_page) {
						this.tableNone = true;
					}
				} else {
					this.$toast.fail(res.msg)
				}
				this.loading = false;
			}
		}
	}
</script>

<style scoped lang="less">
	.wallet_page {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		min-height: 100vh;

		.card_box {
			width: 100%;
			height: 112px;
			background: url('~@/assets/images/home/wallet/bg.png') no-repeat;
			background-size: 100% 100%;
			padding: 20px;
			text-align: left;
			color: #1A1A1A;
			margin-bottom: 40px;

			.card_title {
				margin-bottom: 10px;
				font-size: 12px;
				display: flex;
				align-items: center;
			}

			.usdt_balance {
				font-size: 20px;
				font-weight: 700;
			}

			.usa_balance {
				font-size: 16px;
				font-weight: 700;
			}
		}

		.list_title {
			position: relative;
			padding-left: 15px;
			font-size: 16px;
			margin-bottom: 25px;
			text-align: left;

			&::after {
				position: absolute;
				left: 0;
				top: 3px;
				content: ' ';
				width: 4px;
				height: 16px;
				background-color: #84EADD;
			}
		}

		.table_box {
			flex: 1;
			min-height: 1px;
			overflow-y: auto;
			padding-bottom: 120px;

			.my_table {

				tr {
					line-height: 30px;
				}

				.tr_th {
					color: #84EADD;
				}

				.col1 {
					width: 20%;
				}

				.col2 {
					width: 30%;
				}

				.col3 {
					width: 20%;
				}

				.col4 {
					width: 30%;
				}
			}
		}

		.submit_box {
			position: fixed;
			bottom: 30px;
			left: 50%;
			width: calc(100% - 40px);
			max-width: 750px;
			transform: translateX(-50%);
			// padding: 0 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.submit_but {
				::v-deep>span {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.icon {
					font-size: 20px;
					font-weight: 700;
					margin-right: 5px;
				}

				.icon2 {
					transform: rotate(180deg);
				}
			}
		}
	}
</style>